<template>
  <div id="studentDetailInfo">
    <el-tabs v-model="activeName" class="tabPlane">
      <el-tab-pane label="个人信息" name='1'>
        <div class="goback" @click="routerGoBack">
          <i class="el-icon-arrow-left" style="font-size:14px;vertical-align: middle;"></i>返回
        </div>
        <div class="contentClass onlyShowContent">
          <el-row type="flex" class="row-bg p10" justify="space-between">
            <el-col>
              <div class="imgs">
                <img :src="studentHeader" class="avatar">
                <p style="text-align: center">入学照片</p>
              </div>
              <div class="imgs">
                <img :src="lifeHeadUrl" class="avatar">
                <p style="text-align: center">生活照片</p>
              </div>
            </el-col>
            <!-- <el-col style="width: 220px">
              <el-upload class="upload-demo" :action="prodUrl(`./api/managerInfo/uploadLifeHead/${this.$route.query.sn}`)" :on-success="handleUpload" :show-file-list="false" accept=".jpg,.jpeg,.png" :limit="1">
                <el-button type="primary" size="small" v-permission="['2']">上传入学照片</el-button>
              </el-upload>
            </el-col> -->
          </el-row>
          <el-form :model="basicInfoForm" status-icon label-position="top">
            <el-row :gutter="100">
              <el-col :span="24">
                <h2 class="titleH">基本信息</h2>
              </el-col>
              <el-col :span="8">
                <el-form-item label="学号" prop="sn">
                  <el-input disabled size="small" type="text" v-model="basicInfoForm.sn" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="姓名" prop="name">
                  <el-input disabled size="small" type="text" v-model="basicInfoForm.name" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="曾用名" prop="formerName">
                  <el-input disabled size="small" type="text" v-model="basicInfoForm.formerName" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="性别" prop="gender">
                  <el-input disabled size="small" type="text" v-model="basicInfoForm.gender" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="民族" prop="nation">
                  <el-input disabled size="small" type="text" v-model="basicInfoForm.nation" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="国籍" prop="nation">
                  <el-input disabled size="small" type="text" v-model="basicInfoForm.nationality" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="政治面貌" prop="politicsStatus">
                  <el-input disabled size='small' v-model="basicInfoForm.politicsStatus" value-key='id'> </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="籍贯" prop="nativePlace">
                  <el-input disabled size='small' v-model="basicInfoForm.nativePlace" value-key='id'></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="身份证号" prop="idNumber">
                  <el-input disabled size="small" type="text" v-model="basicInfoForm.idNumber" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="出生日期" prop="birthDate">
                  <el-input disabled size="small" type="text" :value="basicInfoForm.birthDate | moment('YYYY-MM-DD')" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="健康状况" prop="healthState">
                  <el-input disabled size="small" type="text" v-model="basicInfoForm.healthState" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="血型" prop="bloodType">
                  <el-input disabled size='small' v-model="basicInfoForm.bloodType" autocomplete="off"> </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="宗教信仰" prop="religion">
                  <el-input disabled size='small' v-model="basicInfoForm.religion" autocomplete="off"> </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="现在户口所在地" prop="domicilePalce">
                  <el-input disabled size='small' v-model="basicInfoForm.currentDomicilePlace" autocomplete="off"> </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="火车乘车区间" prop="trainSection">
                  <el-input disabled size='small' v-model="basicInfoForm.trainSection" autocomplete="off"> </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="婚姻状况" prop="maritalStatus">
                  <el-input disabled size='small' v-model="basicInfoForm.maritalStatus" autocomplete="off"> </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="与学校联名银行卡账户" prop="openingBank">
                  <el-input disabled size='small' v-model="basicInfoForm.openingBank" autocomplete="off"> </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="银行卡号" prop="bankCard">
                  <el-input disabled size="small" type="text" v-model="basicInfoForm.bankCard" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="特长爱好" prop="hobby">
                  <el-input disabled size="small" type="text" v-model="basicInfoForm.hobby" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="校园一卡通卡号" prop="metroCard">
                  <el-input disabled size="small" type="text" v-model="basicInfoForm.metroCard" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="辅导员姓名" prop="instructorName">
                  <el-input disabled size="small" type="text" v-model="basicInfoForm.instructorName" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="班主任姓名" prop="classTeacher">
                  <el-input disabled size="small" type="text" v-model="basicInfoForm.classTeacher" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="身高(cm)" prop="stature">
                  <el-input disabled size="small" type="text" v-model="basicInfoForm.stature" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="体重(kg)" prop="weight">
                  <el-input disabled size="small" type="text" v-model="basicInfoForm.weight" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <h2 class="titleH">学籍信息</h2>
              </el-col>
              <el-col :span="8">
                <el-form-item label="所属学院" prop="collegeName">
                  <el-input disabled size="small" type="text" v-model="basicInfoForm.collegeName" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="所属专业" prop="majorName">
                  <el-input disabled size="small" type="text" v-model="basicInfoForm.majorName" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="所属年级" prop="grade">
                  <el-input disabled size="small" type="text" v-model="basicInfoForm.grade" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="所属班级" prop="className">
                  <el-input disabled size="small" type="text" v-model="basicInfoForm.className" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="生源类型" prop="sourceType">
                  <el-input disabled size="small" type="text" v-model="basicInfoForm.sourceType" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="学籍状态" prop="educationStatus" style="position:relative;">
                  <el-button type="text" style="position:absolute;top:-40px;left:70px;" @click="dialogAbnormal=true">查看异动情况</el-button>
                  <el-input disabled size="small" type="text" v-model="basicInfoForm.educationStatus" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="学生类型" prop="education">
                  <el-input disabled size="small" type="text" v-model="basicInfoForm.education" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="是否在籍" prop="absentee">
                  <el-input disabled size="small" type="text" :value="basicInfoForm.absentee | isTransform " autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="是否在校" prop="atSchool">
                  <el-input disabled size="small" type="text" :value="basicInfoForm.atSchool | isTransform" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="毕业时间（预计）" prop="graduateDate">
                  <el-input disabled size="small" type="text" v-model="basicInfoForm.graduateDate" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <h2 class="titleH">入学信息</h2>
              </el-col>
              <el-col :span="8">
                <el-form-item label="入学年月" prop="enterDate">
                  <el-input disabled size="small" type="text" v-model="basicInfoForm.enterDate" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="入学前户口所在地" prop="domicilePlace">
                  <el-input disabled size="small" type="text" v-model="basicInfoForm.domicilePlace" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="生源地" prop="sourcePlace">
                  <el-input disabled size="small" type="text" v-model="basicInfoForm.sourcePlace" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="入学前就读中学" prop="highSchool">
                  <el-input disabled size="small" type="text" v-model="basicInfoForm.highSchool" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="高考分数" prop="satScores">
                  <el-input disabled size="small" type="text" v-model="basicInfoForm.satScores" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="邮寄录取通知书家庭地址" prop="mailHomeAddress">
                  <el-input disabled size="small" type="text" v-model="basicInfoForm.mailHomeAddress" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="邮寄录取通知书收件人姓名" prop="addresseeName">
                  <el-input disabled size="small" type="text" v-model="basicInfoForm.addresseeName" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="邮寄录取通知书收件人电话" prop="addresseePhone">
                  <el-input disabled size="small" type="text" v-model="basicInfoForm.addresseePhone" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <h2 class="titleH">通讯信息</h2>
              </el-col>
              <el-col :span="8">
                <el-form-item label="宿舍分布区" prop="dormitoryArea">
                  <el-input disabled size="small" type="text" v-model="basicInfoForm.dormitoryArea" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="寝室号" prop="dorm">
                  <el-input disabled size="small" type="text" v-model="basicInfoForm.dorm" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="联系电话" prop="phone">
                  <el-input disabled size="small" type="text" v-model="basicInfoForm.phone" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="备用电话" prop="standbyPhone">
                  <el-input disabled size="small" type="text" v-model="basicInfoForm.standbyPhone" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="微信号" prop="wechat">
                  <el-input disabled size="small" type="text" v-model="basicInfoForm.wechat" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="QQ号码" prop="qq">
                  <el-input disabled size="small" type="text" v-model="basicInfoForm.qq" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="邮箱" prop="email">
                  <el-input disabled size="small" type="text" v-model="basicInfoForm.email" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="家庭电话" prop="familyPhone">
                  <el-input disabled size="small" type="text" v-model="basicInfoForm.familyPhone" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="家庭电子邮箱" prop="familyEmail">
                  <el-input disabled size="small" type="text" v-model="basicInfoForm.familyEmail" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="家庭所在地区" prop="familyPlace">
                  <el-input disabled size="small" type="text" v-model="basicInfoForm.familyPlace" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="家庭详细地址" prop="familyDetailAddress">
                  <el-input disabled size="small" type="text" v-model="basicInfoForm.familyDetailAddress" autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <h2 class="titleH">家庭信息</h2>
              </el-col>
              <el-col :span="24">
                <p>父母类</p>
                <relational-table :datas="studentParents" />
              </el-col>
              <el-col :span="24">
                <p>直系亲属类</p>
                <relational-table :datas="studentrelatives" />
              </el-col>
              <el-col :span="24">
                <p>其他社会重要联系人类</p>
                <relational-table :datas="studentFriends" />
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-dialog title="查看异动情况" :visible.sync="dialogAbnormal" width="80%" :before-close="handleDialogAbnormal">
      <el-table :data="tableAbnormalData" border style="width: 100%">
        <el-table-column type="index" label="序号" width="50">
        </el-table-column>
        <el-table-column prop="yDLBMC" label="异动类别名称" width="180">
          <template slot-scope="scope">
            {{scope.row.yDLBMC | nullFilter}}
          </template>
        </el-table-column>
        <el-table-column prop="yDRQ" label="异动日期">
          <template slot-scope="scope">
            {{scope.row.yDRQ | nullFilter}}
          </template>
        </el-table-column>
        <el-table-column prop="yDYY" label="异动原因">
          <template slot-scope="scope">
            {{scope.row.yDYY | nullFilter}}
          </template>
        </el-table-column>
        <el-table-column prop="yDWMC" label="原学院名称">
          <template slot-scope="scope">
            {{scope.row.yDWMC | nullFilter}}
          </template>
        </el-table-column>
        <el-table-column prop="yZYMC" label="原专业名称">
          <template slot-scope="scope">
            {{scope.row.yZYMC | nullFilter}}
          </template>
        </el-table-column>
        <el-table-column prop="yNJ" label="原年级">
          <template slot-scope="scope">
            {{scope.row.yNJ | nullFilter}}
          </template>
        </el-table-column>
        <el-table-column prop="yBH" label="原班号">
          <template slot-scope="scope">
            {{scope.row.yBH | nullFilter}}
          </template>
        </el-table-column>
        <el-table-column prop="xZYMC" label="现专业名称">
          <template slot-scope="scope">
            {{scope.row.xZYMC | nullFilter}}
          </template>
        </el-table-column>
        <el-table-column prop="xNJ" label="现年级">
          <template slot-scope="scope">
            {{scope.row.xNJ | nullFilter}}
          </template>
        </el-table-column>
        <el-table-column prop="xBH" label="现班号">
          <template slot-scope="scope">
            {{scope.row.xBH | nullFilter}}
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-pagination v-if="tableAbnormalData.length>0" layout="prev, pager, next" :total="abnormalTotal" :page-size="abnormalSize" :current-page="abnormalPage" @current-change="handleAbnormalPage">
        </el-pagination>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import defaultPic from '@/assets/images/defaultPic.png'
import {routerPrevName, prodUrl} from '@/tools/utils'
import {common, college} from '@api/index'
import RelationalTable from '../../components/relationalTable'
export default {
  name: 'studentDetailInfo',
  components: {
    RelationalTable
  },
  data () {
    return {
      dialogAbnormal: false, // 异动情况弹窗
      tableAbnormalData: [],
      abnormalTotal: 0,
      abnormalSize: 5,
      abnormalPage: 1,
      userType: parseInt(this.$store.state.user.type),
      activeName: '1',
      input: '111',
      basicInfoForm: {
        sn: null,
        name: null,
        gender: null,
        picUrl: null,
        lifeHeadUrl: null,
        classTeacher: '',
        dorm: '',
        dormitoryArea: '',
        instructorName: '',
        modifyStatus: null
      },
      studentParents: [],
      studentrelatives: [],
      studentFriends: [],
      uploadData: {
        sn: this.$route.query.sn
      }

    }
  },
  computed: {
    studentHeader () {
      return this.basicInfoForm.picUrl ? `./api/common/getHeadPic?picUrl=${this.basicInfoForm.picUrl}` : defaultPic
    },
    lifeHeadUrl () {
      return this.basicInfoForm.lifeHeadUrl ? `./api/common/getHeadPic?picUrl=${this.basicInfoForm.lifeHeadUrl}` : defaultPic
    }
  },
  watch: {
    dialogAbnormal (newval, oldval) {
      if (newval) {
        this.getStudentAbnormalStatus()
      }
    }
  },
  created () {
    this.initPage()
  },
  methods: {
    prodUrl,
    initPage () {
      this.managerGetStudentInfoBySn()
    },
    handleDialogAbnormal () {
      this.dialogAbnormal = false
    },
    managerGetStudentInfoBySn () {
      common()._getStudentBaseInfoHistory(this.$route.query.sn).then(res => {
        if (res.status) {
          Object.assign(this.basicInfoForm, res.data, res.data.studentBasic, res.data.studentContact, res.data.studentEducation, {
            trainSection: (res.data.studentBasic.departurePlace || res.data.studentBasic.destinationPlace) ? `${res.data.studentBasic.departurePlace}-${res.data.studentBasic.destinationPlace}` : ''
          })

          // 处理时间
          if (this.basicInfoForm.birthDate) {
            this.basicInfoForm.birthDate = this.$moment(this.basicInfoForm.birthDate).format('YYYY-MM-DD')
          }
          if (this.basicInfoForm.enterDate) {
            this.basicInfoForm.enterDate = this.$moment(this.basicInfoForm.enterDate).format('YYYY-MM-DD')
          }
          if (this.basicInfoForm.graduateDate) {
            this.basicInfoForm.graduateDate = this.$moment(this.basicInfoForm.graduateDate).format('YYYY-MM')
          }
          this.studentParents = res.data.studentFamilies.filter((item) => { return item.type === 0 })
          this.studentrelatives = res.data.studentFamilies.filter((item) => { return item.type === 1 })
          this.studentFriends = res.data.studentFamilies.filter((item) => { return item.type === 2 })
        }
      })
    },
    // 学生异动情况
    getStudentAbnormalStatus () {
      college()._queryXJYDList(
        {
          'pgCt': this.abnormalPage,
          'pgSz': this.abnormalSize,
          'sn': this.basicInfoForm.sn
        }
      ).then(res => {
        this.tableAbnormalData = []
        if (res.status) {
          this.tableAbnormalData.push(...res.data.datas)
          this.abnormalTotal = res.data.total
        }
      })
    },
    handleAbnormalPage (val) {
      this.abnormalPage = val
      this.getStudentAbnormalStatus()
    },
    // 图片上传
    handleUpload (response, file, fileList) {
      if (response.status) {
        this.$message.success('上传成功')
        this.basicInfoForm.picUrl = response.data
        // this.managerGetStudentInfoBySn()
      }
    },
    routerGoBack () {
      this.$router.push({
        name: `${routerPrevName(this.userType)}_historyStudents`,
        params: {'isgoback': true}
      })
    }
  }
}
</script>
<style lang="less" scoped>
.imgs {
  width: 130px;
  display: inline-block;
  img {
    width: 130px;
    height: 167px;
  }
}
</style>
